<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>大涛讲堂-Vue尝鲜demo5</title>
		<style>
			h1{
				text-align: center;
			}
			table,
			td,
			th {
				border-collapse: collapse;
				border-spacing: 0
			}
		
			table {
				margin: 0 auto;
				text-align: center;
			}
			
			td,
			th {
				border: 1px solid #bcbcbc;
				padding: 5px 10px;
			}
			
			th {
				background: #42b983;
				font-size: 1.2rem;
				font-weight: 400;
				color: #fff;
				cursor: pointer;
			}
			
			tr:nth-of-type(odd) {
				background: #fff;
			}
			
			tr:nth-of-type(even) {
				background: #eee;
			}
			a{
				text-decoration: none;
				display: block;
				padding: 5px 10px;
				background: #269ABC;
				color:#fff;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>微信精选文章</h1>
			<table>
				<thead>
					<tr>
						<th>ID</th>
						<th>标题</th>
						<th>来源</th>
						<th>图片</th>
						<th>查看</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="list in result['list']">
						<td>{{list.id}}</td>
						<td>{{list.title}}</td>
						<td>{{list.source}}</td>
						<td><img v-bind:src="list.firstImg" alt="" width="200" /></td>
						<td><a v-bind:href="list.url">阅读原文</a></td>
					</tr>
				</tbody>
			</table>
		</div>
		<script src="vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',//
				data:{
					"reason":"请求成功",
					"result":{
						"list":[
							{
								"id":"wechat_20170524020647",
								"title":"这才是中国说话礼仪，太全了！",
								"source":"腾讯网",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25166268.jpg\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020647"
							},
							{
								"id":"wechat_20170524021107",
								"title":"十八层地狱都是什么样子？劝世人多行善",
								"source":"刀墓手札",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25166891.jpg\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524021107"
							},
							{
								"id":"wechat_20170524022075",
								"title":"编辑部杀人事件",
								"source":"故事会",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25167481.jpg\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524022075"
							},
							{
								"id":"wechat_20170524020087",
								"title":"生活的美好，缘于一颗平常心",
								"source":"情绪管理",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-24770365.jpg\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020087"
							},
							{
								"id":"wechat_20170524020085",
								"title":"做一个纯粹的女人",
								"source":"情绪管理",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-15035340.jpg\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020085"
							},
							{
								"id":"wechat_20170524020223",
								"title":"看懂的请给下一个人",
								"source":"环球好听英文歌",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-15866850.static\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020223"
							},
							{
								"id":"wechat_20170524020612",
								"title":"你知道吗？好茶是泡出来的，好人是做出来的！",
								"source":"普洱茶界",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25166255.jpg\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020612"
							},
							{
								"id":"wechat_20170524020995",
								"title":"子若强于我，要钱做什么？子若不如我，留钱做什么（说得太好了！）",
								"source":"洲际电池圈",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-21531071.static\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524020995"
							},
							{
								"id":"wechat_20170524022415",
								"title":"电缆人必看！借钱见人心，还钱见人品！",
								"source":"买卖宝",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25167687.jpg\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524022415"
							},
							{
								"id":"wechat_20170523061558",
								"title":"孩子出不出色，取决于妈妈的性格（深度好文）",
								"source":"妈妈手册",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-24679658.static\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170523061558"
							},
							{
								"id":"wechat_20170524017876",
								"title":"每日诗词(359-109)",
								"source":"诗词月刊",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25164852.jpg\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524017876"
							},
							{
								"id":"wechat_20170524002636",
								"title":"新婚不久丈夫去世，漂亮的妻子第二天就...太现实了！",
								"source":"每日幽默小视频",
								"firstImg":"",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524002636"
							},
							{
								"id":"wechat_20170524014500",
								"title":"【我与浓情黑土地文学平台之缘】韩治林：我与浓情黑土地平台",
								"source":"浓情黑土地",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-18100317.static\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014500"
							},
							{
								"id":"wechat_20170524014630",
								"title":"书画|精美五百罗汉图 五百罗汉的由来 附500罗汉全名单",
								"source":"上上阁艺术沙龙",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25163758.jpg\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014630"
							},
							{
								"id":"wechat_20170524014621",
								"title":"【涨知识】特稿写作秘诀在这里，拿走不谢！",
								"source":"中国报业",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25163761.jpg\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014621"
							},
							{
								"id":"wechat_20170524014617",
								"title":"书画|美国 Ricky.Mujica 瑞奇.穆希卡超现实浪漫主义绘画欣赏",
								"source":"上上阁艺术沙龙",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25163726.jpg\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014617"
							},
							{
								"id":"wechat_20170524014603",
								"title":"视听|心经的境界 佛音《般若波罗密多心经》-演唱:王蓉",
								"source":"上上阁艺术沙龙",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25163713.jpg\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014603"
							},
							{
								"id":"wechat_20170524014607",
								"title":"文化|中国古代四大美女之二《落雁•回望昭君》朗诵：高昂",
								"source":"上上阁艺术沙龙",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25163715.jpg\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524014607"
							},
							{
								"id":"wechat_20170524015424",
								"title":"宗谱在我心中－记骆相生宗叔（修正版）",
								"source":"骆姓论坛",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25164030.jpg\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524015424"
							},
							{
								"id":"wechat_20170524015418",
								"title":"安徽芜湖繁阳骆氏《忠懇堂》建祠修谱公告",
								"source":"骆姓论坛",
								"firstImg":"http:\/\/zxpic.gtimg.com\/infonew\/0\/wechat_pics_-25164010.jpg\/640",
								"mark":"",
								"url":"http:\/\/v.juhe.cn\/weixin\/redirect?wid=wechat_20170524015418"
							}
						],
						"totalPage":3739,
						"ps":20,
						"pno":1
					},
					"error_code":0
				}
			});
		</script>
	</body>
</html>
